<template>
	<cover-view class="tab-bar">
		<cover-view class="tab-bar-border"></cover-view>
		<cover-view v-for="(item,index) in list" :key="index" class="tab-bar-item" @tap="navigatorTo(item.pagePath)">
			<cover-view v-if="item.text">
				<cover-image :src="selected === index ? item.selectedIconPath : item.iconPath"></cover-image>
				<cover-view :style="{color: selected === index ? selectedColor : color}">{{item.text}}</cover-view>
			</cover-view>
			<cover-view wx:else class="sc-fuwu-icon">
				<cover-view class="iconfont">
					<cover-image :src="item.iconPath"></cover-image>
				</cover-view>
			</cover-view>
		</cover-view>
	</cover-view>
</template>

<style>
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 96rpx;
		background: white;
		display: flex;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tab-bar-border {
		background-color: rgba(0, 0, 0, 0.33);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		transform: scaleY(0.5);
	}

	.tab-bar-item {
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.tab-bar-item cover-image {
		width: 18px;
		height: 18px;
	}

	.tab-bar-item cover-view {
		font-size: 10px;
	}

	.sc-fuwu-icon .iconfont {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		/* text-align: center; */
		background: #09bb07;
		border: 0.2rem solid #9de49c;
		width: 2rem !important;
		height: 2rem !important;
		line-height: 2rem;
		border-radius: 3.125rem;
		margin-bottom: 0.125rem;
		color: #fff;
		font-size: 1.3625rem !important;
	}

	.sc-fuwu-icon .iconfont cover-image {
		width: 26px;
		height: 26px;
	}
</style>

<script>
	export default {
		props: {
			current: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				selected: this.current,
				color: "#cdcdcd",
				selectedColor: "#09bb07",
				list: [{
					pagePath: "/pages/index/index",
					iconPath: "/static/image/tab-1.png",
					selectedIconPath: "/static/image/tab-1-act.png",
					text: "首页"
				}, {
					pagePath: "/pages/activity/index",
					iconPath: "/static/image/tab-2.png",
					selectedIconPath: "/static/image/tab-2-act.png",
					text: "活动"
				}, {
					pagePath: "/pages/service/index",
					iconPath: "/static/image/tab-center.png"
				}, {
					pagePath: "/pages/org/index",
					iconPath: "/static/image/tab-3.png",
					selectedIconPath: "/static/image/tab-3-act.png",
					text: "组织"
				}, {
					pagePath: "/pages/mine/index",
					iconPath: "/static/image/tab-4.png",
					selectedIconPath: "/static/image/tab-4-act.png",
					text: "我的"
				}]
			}
		},
		methods: {
			navigatorTo(e) {
				uni.redirectTo({
					url: e,
					animationType: 'none'
				});
			}
		}
	}
</script>
